<template>
    <view class="bg-content">
        <div style="background-color: white;">
            <u-dropdown ref="uDropdown" :border-bottom="true">
                <u-dropdown-item title="操作">
                    <view class="slot-content">
                        <div style="background-color: white;">
                            <u-button
                                    @click="navigateTo(`/pages/sub/sub2-store-platform/store-platform/store-platform-goods-manage/store-platform-goods-title-extend/store-platform-goods-title-extend-associatioin/index`)">
                                关联扩展标题
                            </u-button>
                            <u-button @click="deleteItem(null)">批量删除勾选商品已关联的扩展标题</u-button>
                        </div>
                    </view>
                </u-dropdown-item>
                <u-dropdown-item title="筛选数据">
                    <view class="slot-content">
                        <view style="padding: 15px; background-color: white;" v-if="validateForm.controls">
                            <u-form ref="validateFormRef" :model="validateForm.value" :label-width="200">
                                <u-form-item label="标题扩展位置" prop="goodsTitleExtendId">
                                    <u-input type="select" :select-open="validateForm.controls.goodsTitleExtendId.isShow"
                                             v-model="validateForm.controls.goodsTitleExtendId.textDesc"
                                             placeholder="请选择标题扩展位置" @click="validateForm.controls.goodsTitleExtendId.isShow = true; $forceUpdate();"></u-input>
                                </u-form-item>
                                <u-form-item label="商品标题" prop="title">
                                    <u-input v-model="validateForm.value.title" placeholder="请输入商品标题"/>
                                </u-form-item>
                                <u-form-item label="商品状态" prop="status">
                                    <u-input type="select" :select-open="validateForm.controls.status.isShow"
                                             v-model="validateForm.controls.status.textDesc"
                                             placeholder="请选择商品状态" @click="validateForm.controls.status.isShow = true; $forceUpdate();"></u-input>
                                </u-form-item>
                            </u-form>

                            <div style="display: flex;">
                                <div style="width: 100%;">
                                    <u-button type="primary" @click="validateForm.resetValues()">重置过滤条件</u-button>
                                </div>
                                <div style="width: 100%;">
                                    <u-button type="error" @click="validateForm.doSearch(_self, goodsTitleExtendGoodsList)">搜索</u-button>
                                </div>
                            </div>
                        </view>
                    </view>
                </u-dropdown-item>
            </u-dropdown>
        </div>

        <div v-if="validateForm.controls">
            <u-select mode="single-column" label-name="name" value-name="code" :mask-close-able="false"
                      v-model="validateForm.controls.goodsTitleExtendId.isShow" :list="validateForm.controls.goodsTitleExtendId.options"
                      :default-value="validateForm.controls.goodsTitleExtendId.defaultValue"
                      @cancel="validateForm.controls.goodsTitleExtendId.isShow = false; $forceUpdate();"
                      @confirm="UFormUtil.selectSingleColumnConfirm($event, validateForm.controls.goodsTitleExtendId)"></u-select>

            <u-select mode="single-column" label-name="name" value-name="code" :mask-close-able="false"
                      v-model="validateForm.controls.status.isShow" :list="validateForm.controls.status.options"
                      :default-value="validateForm.controls.status.defaultValue"
                      @cancel="validateForm.controls.status.isShow = false; $forceUpdate();"
                      @confirm="UFormUtil.selectSingleColumnConfirm($event, validateForm.controls.status)"></u-select>
        </div>

        <scroll-view scroll-x="true">
            <div class="table table-bordered" style="background-color: white; text-align: center; width: 1300px; overflow: auto;">
                <div class="tr">
                    <div class="td" style="width: 50px;">
                        <u-checkbox size="40" :key="-1"
                                    @change="onCheckboxChange($event)"
                                    v-model="allCheckbox"
                                    shape="circle"
                                    active-color="red"
                        >
                        </u-checkbox>
                    </div>
                    <div class="td text-center bold" style="width: 300px;">商品原始标题</div>
                    <div class="td text-center bold" style="width: 100px;">商品状态</div>
                    <div class="td text-center bold" style="width: 200px;">标题扩展内容</div>
                    <div class="td text-center bold" style="width: 150px;">标题扩展位置</div>
                    <div class="td text-center bold" style="width: 300px;">商品标题扩展后效果</div>
                    <div class="td text-center bold" style="width: 150px;">商品标题扩展状态</div>
                    <div class="td text-center bold" style="width: 50px;">操作</div>
                </div>
                <div class="tr" v-for="(item, index) in goodsTitleExtendGoodsList" :key="item.id">
                    <div class="td" style="width: 50px;">
                        <u-checkbox size="40"
                                    @change="onCheckboxChange($event, item)" :key="item.id"
                                    :value="item.checked"
                                    shape="circle"
                                    active-color="red"
                        >
                        </u-checkbox>
                    </div>
                    <div class="td" style="width: 300px;">{{item.title | toEmptyStr}}</div>
                    <div class="td" style="width: 100px;">{{item.statusText | toEmptyStr}}</div>
                    <div class="td" style="width: 200px;">
                        {{item.tbGoodsTitleExtend ? item.tbGoodsTitleExtend.title : '' | toEmptyStr}}
                    </div>
                    <div class="td" style="width: 150px;">
                        {{item.tbGoodsTitleExtend ? item.tbGoodsTitleExtend.positionText : '' | toEmptyStr}}
                    </div>
                    <div class="td" style="width: 300px;">
                        {{item.tbGoodsTitleExtend ? item.tbGoodsTitleExtend.newTitle : '' | toEmptyStr}}
                    </div>
                    <div class="td" style="width: 150px;">
                        {{item.tbGoodsTitleExtend ? item.tbGoodsTitleExtend.statusText : '' | toEmptyStr}}
                    </div>
                    <div class="td" style="width: 50px;">
                        <div style="margin-top: 10px; margin-bottom: 10px; text-decoration: underline;" @click="deleteItem(item.id, index)"
                             v-if="item.tbGoodsTitleExtend">
                            删除
                        </div>
                    </div>
                </div>
            </div>
        </scroll-view>

        <div style="padding-top: 10px; padding-bottom: 10px;">
            <u-loadmore :status="pagination.status" bg-color="#eeeeee"/>
        </div>
    </view>
</template>

<script>

    import {TbGoodsTitleExtendService} from "@/dev/services/tb-goods-title-extend.service";
    import {CommonUtil} from "@/dev/core/utils/common.util";
    import {SysDictionaryService} from "@/dev/services/sys-dictionary.service";
    import {UFormUtil} from "@/dev/core/utils/u-form.util";

    export default {
        data() {
            return {
                goodsTitleExtendGoodsList: [],
                validateForm: {
                    value: {
                        communityId: this.globalVariable.userInfo.tbStore.communityId,
                        storeId: this.globalVariable.userInfo.tbStore.id,
                        goodsTitleExtendId: '',
                        title: '',
                        status: '',
                    },
                },
                allCheckbox: false,
            }
        },
        mounted() {
            const _self = this;
            console.log("------------------------------------------", this.validateForm);
            new TbGoodsTitleExtendService().findTbGoodsTitleExtendList({
                communityId: _self.globalVariable.userInfo.tbStore.communityId,
                storeId: _self.globalVariable.userInfo.tbStore.id
            }).then(result => {
                result.forEach(item => {
                    item.name = item['title'] + '--' + item['positionText'] + '--' + item['statusText'];
                    item.code = item.id;
                });

                UFormUtil.setOptions(_self.validateForm.controls.goodsTitleExtendId, [{name: "全部", code: ''}, ...result]);
                _self.$forceUpdate();
            });

            new SysDictionaryService().optionList('tb_goods@status', null).then(result => {
                UFormUtil.setOptions(_self.validateForm.controls.status, [{name: "全部", code: ''}, ...result]);
                _self.$forceUpdate();
            });

            this.doRefresh(this.goodsTitleExtendGoodsList)
        },
        methods: {
            onCheckboxChange($event, item) {
                const _self = this;
                console.log($event, item)
                if (!item) {  // 全选按钮
                    this.allCheckbox = $event.value;
                    if (this.allCheckbox) {
                        this.goodsTitleExtendGoodsList.forEach(item => {
                            item.checked = true;
                        });
                    } else {
                        this.goodsTitleExtendGoodsList.forEach(item => {
                            item.checked = false;
                        });
                    }
                } else {
                    item.checked = $event.value;
                    // 判断是否需要勾选 全选按钮
                    let uncheckedList = _self.goodsTitleExtendGoodsList.filter(item => !item.checked);
                    if (uncheckedList.length === 0) {  // 全部选中
                        this.allCheckbox = true;
                    } else { // 存在没选中的
                        this.allCheckbox = false;
                    }
                }
                _self.$forceUpdate();
            },
            /**
             * 加载更多数据中
             * @param infiniteScroll
             */
            doInfinite(infiniteScroll) {
                const _self = this;
                new TbGoodsTitleExtendService().findTableTbGoodsListCascade({
                    pagination: _self.pagination,
                    data: Object.assign({}, _self.validateForm.value),
                }).then(result => {
                    result.list.forEach(item => {
                        item.checked = false;
                    });
                    _self.pagination.refreshPage(result);
                    _self.goodsTitleExtendGoodsList = [..._self.goodsTitleExtendGoodsList, ...result.list];
                    _self.$forceUpdate();
                });
            },
            deleteItem(goodsIds) {
                const _self = this;
                if (!goodsIds) {
                    _self.$refs.uDropdown.close();
                    goodsIds = [];
                    _self.goodsTitleExtendGoodsList.forEach(item => {
                        if (item.checked) {
                            goodsIds.push(item.id);
                        }
                    });
                    if (!goodsIds.length) {
                        CommonUtil.alert("请勾选待删除扩展标题的商品");
                        return;
                    }
                    goodsIds = goodsIds.join(",");
                }
                console.log(goodsIds);

                CommonUtil.alert({
                    title: '提示！',
                    content: '确定删除商品的扩展标题吗？',
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框
                        } else { // 点击确定
                            new TbGoodsTitleExtendService().batchDelAssignedTbGoodsTitleExtends(goodsIds).then(result => {
                                CommonUtil.toast('删除成功');
                                _self.goodsTitleExtendGoodsList.forEach(item => {
                                    if (goodsIds.indexOf(item.id) !== -1) {
                                        delete item.tbGoodsTitleExtend;
                                        item.checked = false;
                                        _self.$forceUpdate();
                                    }
                                });
                            });
                        }
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
